<template>
    <div class="virtual-list-container">
      <h2>使用 vue-virtual-scroller 实现虚拟列表</h2>
      
      <!-- 动态高度的虚拟列表 -->
      <RecycleScroller
        class="scroller"
        :items="items"
        :item-size="54"
        key-field="id"
        v-slot="{ item }"
      >
        <div class="item" :style="{ height: item.height + 'px' }">
          <span>Item #{{ item.id }}</span>
          <span>Content {{ item.content }}</span>
        </div>
      </RecycleScroller>
      
      <!-- 固定高度的虚拟列表 -->
      <DynamicScroller
        class="scroller"
        :items="dynamicItems"
        :min-item-size="54"
        key-field="id"
        v-slot="{ item, index, active }"
      >
        <DynamicScrollerItem
          :item="item"
          :active="active"
          :size-dependencies="[item.content]"
          :data-index="index"
        >
          <div class="item">
            <span>Item #{{ item.id }}</span>
            <span>Content {{ item.content }}</span>
            <div v-if="item.details" class="details">
              {{ item.details }}
            </div>
          </div>
        </DynamicScrollerItem>
      </DynamicScroller>
    </div>
  </template>
  
  <script>
  import { RecycleScroller, DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
  import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
  
  export default {
    components: {
      RecycleScroller,
      DynamicScroller,
      DynamicScrollerItem
    },
    data() {
      // 生成10000条固定高度数据
      const items = Array.from({ length: 10000 }, (_, i) => ({
        id: i + 1,
        content: `Item content ${i + 1}`,
        height: 54 // 固定高度
      }))
      
      // 生成10000条动态高度数据
      const dynamicItems = Array.from({ length: 10000 }, (_, i) => ({
        id: i + 1,
        content: `Dynamic item ${i + 1}`,
        details: i % 5 === 0 
          ? 'This item has additional details that make it taller. '.repeat(5)
          : null
      }))
      
      return {
        items,
        dynamicItems
      }
    }
  }
  </script>
  
  <style scoped>
  .virtual-list-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .scroller {
    height: 500px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }
  
  .item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .details {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
  }
  </style>